<template>
	<!-- 可爱卡通：猫头鹰蒙眼睛 -->
	<view class="blindfold">
		<view class="owl-cartoon" :class="hideEyes?'password':''">
			<view class="hand"></view>
			<view class="hand hand-r"></view>
			<view class="arms">
				<view class="arm"></view>
				<view class="arm arm-r"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否蒙眼
			show: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				hideEyes: false
			}
		},
		watch: {
			show(val) {
				this.hideEyes = val
			},
			hideEyes(val) {
				this.$emit('update:show', val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.blindfold {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		position: relative;

		.owl-cartoon {
			width: 211px;
			height: 108px;
			background-image: url('');
			background-repeat: no-repeat;
			background-size: 100%;
			position: absolute;

			.hand {
				width: 34px;
				height: 34px;
				-webkit-border-radius: 40px;
				border-radius: 40px;
				background-color: #472d20;
				transform: scaleY(0.6);
				transition: 0.3s ease-out;
				position: absolute;
				left: 14px;
				bottom: -8px;
			}

			.hand.hand-r {
				left: 170px;
			}

			.arms {
				top: 58px;
				position: absolute;
				width: 100%;
				height: 41px;
				overflow: hidden;

				.arm {
					width: 40px;
					height: 65px;
					position: absolute;
					left: 20px;
					top: 40px;
					background-image: url('');
					background-size: 100%;
					transition: 0.3s ease-out;
					transform: rotate(-20deg);
				}

				.arm.arm-r {
					transform: rotate(20deg) scaleX(-1);
					left: 158px;
				}
			}
		}

		.owl-cartoon.password .hand {
			transform: translateX(42px) translateY(-15px) scale(0.7);
		}

		.owl-cartoon.password .hand.hand-r {
			transform: translateX(-42px) translateY(-15px) scale(0.7);
		}

		.owl-cartoon.password .arms .arm {
			transform: translateY(-40px) translateX(40px);
		}

		.owl-cartoon.password .arms .arm.arm-r {
			transform: translateY(-40px) translateX(-40px) scaleX(-1);
		}
	}
</style>
